<template>
  <div id="app">
  {{count}}
  <!--{{name}}-{{gender}}{{countPlus}} -->
  <div><button  @click="handelClick">
   
    <!-- @click="incrementBy(3)" -->
     点我</button></div>
     <div>
       <ul>
         <li v-for="(item,index) in list" :key="index">{{item.bookName}}</li>
       </ul>
     </div>
  </div>
</template>

<script>
// import store from './vuex/store.js'
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'
export default {
  data(){
    return{
      // localCount:9,
      // obj:{}
    }
  },
  name: 'App',
  computed:{
    ...mapState({
              //传过来的参数   函数的返回值       
       count: state => state.count,
       name: state => state.name,
       gender: state => state.gender,
       list: state => state.list,
      //  如果该参数是有语句得到的 就不能写箭头函数  只要state.count变化 countPlus就会重新被赋值
        countPlus (state) {
        return state.count + this.localCount
      }
    }),
  },
    // count(){
    //   return this.$store.state.count
    // }
    // 传过来的是对象
   
     
     // 传字符串参数 'count' 等同于 `state => state.count`
    //  mapState([
    //    'count','name','gender'
    //  ]),
    
  methods:{
    //  ...mapMutations([
    //   'incrementBy2'
    // ]),
     handelClick(){
      //  Action 通过 store.dispatch 方法触发：
       this.$store.dispatch('getUserData')
      //  Action 通过 store.dispatch 方法触发：
      //  this.$store.dispatch('incrementBy2',{amount:5})
      //  this.$store.dispatch({type:'incrementBy2',amount:5})
      // 触发带延时器的方法
      //  this.$store.dispatch('incrementAsync',4)
      
      //  this.incrementBy()
      //  console.log(this.count)
    // //    //  引入父元素即store.js中定义的方法  可以传值 大多数情况下应该为对象
    //     //  this.$store.commit('SOME_MUTATION',3)
    // //    this.$store.commit('increment',{amount:5})
    //      //  console.log( this.$store.state.count++)
    //      // 以新对象替换老对象
    //       this.obj ={...this.$store.state,'hobbies':'haha'}
    //       console.log(this.obj)
     }
   
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
